<!DOCTYPE html>

<html lang="en">
	<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>密码学课堂 | 首页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	<link rel="icon" type="image/png" href="img/logo.png">
    <!-- <link rel="stylesheet" href="css/bootstrap.css" media="screen"> -->
	<link href="https://stackpath.bootstrapcdn.com/bootswatch/4.4.1/sketchy/bootstrap.min.css" rel="stylesheet" integrity="sha384-2kOE+STGAkgemIkUbGtoZ8dJLqfvJ/xzRnimSkQN7viOfwRvWseF7lqcuNXmjwrL" crossorigin="anonymous">
	<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/custom.min.css">
    <script id="twitter-wjs" src="js/widgets.js"></script>
	<script type="text/javascript" async="" src="js/ga.js"></script><script>

     var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-23019901-1']);
      _gaq.push(['_setDomainName', "bootswatch.com"]);
        _gaq.push(['_setAllowLinker', true]);
      _gaq.push(['_trackPageview']);

     (function() {
       var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
       ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
       var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
     })();

    </script>
<body id="home">
    <div class="navbar navbar-expand-lg fixed-top navbar-dark bg-primary">
      <div class="container ">
          <a href="http://crypto.jwt1399.top/" class="navbar-brand">
			 <img src="img/logo.png">Cryptography class</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav">
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="" id="themes">古典&现代 
			  <span class="caret"></span></a>
              <div class="dropdown-menu" aria-labelledby="themes">
                <a class="dropdown-item" href="jian-crypto/dist/index.html">密码学简介</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="../rot13/dist/index.html">Substitution Cipher</a>
                <a class="dropdown-item" href="mirror/dist/index.html">Image password</a>
                <a class="dropdown-item" href="caesar/dist/index.html">Caesar Cipher</a>
                <a class="dropdown-item" href="vigenere/dist/index.html">Vigenere</a>
                <a class="dropdown-item" href="morse/index.html">Morse code</a>
				<a class="dropdown-item" href="ascii/dist/index.html">ASCII</a>
                <a class="dropdown-item" href="">DES</a>
                <a class="dropdown-item" href="rsa/index.html">RSA</a>
                <a class="dropdown-item" href="">ECC</a>
                <a class="dropdown-item" href="">SHA1</a>
                <a class="dropdown-item" href="">3DES</a>
                <a class="dropdown-item" href="aes/dist/index.html">AES</a>
                <a class="dropdown-item" href="">SHA3</a>
                <a class="dropdown-item" href="">SM4</a>
              </div>
            </li>
			<li class="nav-item">
			  <a class="nav-link" href="challenge/UI/index.html">挑战</a>
			</li>
			<li class="nav-item">
			  <a class="nav-link" href="">帮助</a>
			</li>
            <li class="nav-item">
              <a class="nav-link" href="">关于</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://jwt1399.top/">博客</a>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="splash">
      <div class="container">
        <div class="row">
          <div class="col-lg-12">
            <h1>A light class designed for cryptography</h1>
			  <div id="social">
				<div class="description center-align">              
					<span id="subtitle"></span>
					<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>
					<script>
						var typed = new Typed("#subtitle", {
							strings: ['生动形象的讲解密码学算法','为你打造完美的课堂服务'],
							startDelay: 300,
							typeSpeed: 100,
							loop: true,
							backSpeed: 50,
							showCursor: true
						});
					</script>	
				</div>
			  </div>
			         
			  <!--unity下载-->
			  <div class="text-center">
			    <div class="preview">
			      <div class="image">
			        <a href="https://jwt1399.top"><img src="https://jwt1399.top/favicon.png" class="img-responsive" alt="Cerulean" title="" style=""></a>
			      </div>
			      <div class="options">
			        <h2>Unity</h2>
			        <h3>3d cryptographic games</h3>
			        <div class="btn-group"><a class="btn btn-danger" href="https://jwt1399.top">预览</a></div>
					<div class="btn-group"><a class="btn btn-danger" href="">下载</a></div>
					
			      </div>
			    </div>
			  </div>
            </div>
          </div>
        </div>

      </div>
    </div>

		<!--优点-->
    <div class="section-tout">
      <div class="container">
        <div class="row">
          <div class="col-lg-4 col-sm-6">
            <div class="icon"><i class="fa fa-file-o"></i></div>
            <h4>易于安装</h4>
            <p>三维密码学游戏只需下载压缩包，解压后即可运行。</p>
          </div>
          <div class="col-lg-4 col-sm-6">
            <div class="icon"><i class="fa fa-cogs"></i></div>
            <h4>生动形象</h4>
             <p>包含3d游戏、算法讲解、课后挑战、通过动画展示、实践操作、习题巩固，大幅提升学习效率。</p>
          </div>
          <div class="col-lg-4 col-sm-6">
            <div class="icon"><i class="fa fa-wrench"></i></div>
            <h4>涵盖丰富</h4>
            <p>包含古典密码、现代密码等多个密码算法。</p>
          </div>
         <div class="col-lg-4 col-sm-6">
            <div class="icon"><i class="fa fa-github"></i></div>
            <h4>开源的</h4>
            <p>该项目是根据MIT许可发布的，并在 <a target="_blank" rel="noopener noreferrer" href="">GitHub</a>上进行维护。</p>
          </div>
          <div class="col-lg-4 col-sm-6">
            <div class="icon"><i class="fa fa-plug"></i></div>
            <h4>操作简单</h4>
            <p>包含古典密码、现代密码等多个密码算法。</p>
          </div>
          <div class="col-lg-4 col-sm-6">
            <div class="icon"><i class="fa fa-bullhorn"></i></div>
            <h4>保持更新</h4>
            <p>本项目将不断收集更多算法，持续更新</p>
          </div>
        </div>
      </div>
    </div>




<div class="section-preview">
<div class="container text-center">
 <div class="row">
	  <div class="col-lg-12" >
		<h1>Good luck have fun!</h1>
		<p class="lead">Learn cryptography by playing game.</p>
	  </div>
	  <div class="col-lg-12" align="center" >
		<div class="preview">
		  <div class="image" align="center">
			<a href="" target="_blank">
				<img class="img-responsive" src="img/unity.jfif" alt="unity game" width="1000px";hheight="340px"></a>
		  </div>
		  <div class="options" align="center">
			<h3>3d cryptographic games</h3>
			<p>A game for learning cryptography</p>
			<div>
			  <div class="btn-group"><a class="btn btn-danger" href="" target="_blank">Preview</a></div>
			  <div class="btn-group"><a class="btn btn-danger" href="" target="_blank">Play Now</a></div>
			</div>
		  </div>
		</div>
	</div>
</div>
</div>



    <div class="section-preview">
      <div class="container">
        <div class="row">

          <div class="col-lg-4 col-sm-6">
            <div class="preview">
             <div class="image">
                <a href="../rot13/dist/index.html"><img src="img/cover.jpeg" class="img-responsive" alt="Cerulean" title="" style=""></a>
			  </div>
              <div class="options">
                <h3>Substitution Cipher</h3>
                <p>古典密码</p>
                <div class="btn-group">
					<a class="btn btn-danger" href="rot13/dist/index.html">Go somewhere</a>
				</div>
			  </div> 
            </div>
          </div>
		  
		  <div class="col-lg-4 col-sm-6">
		    <div class="preview">
		     <div class="image">
		        <a href="mirror/dist/index.html"><img src="img/cover.jpeg" class="img-responsive" alt="Cerulean" title="" style=""></a>
		  			  </div>
		      <div class="options">
		        <h3>Image password</h3>
		        <p>古典密码</p>
		        <div class="btn-group">
					<a class="btn btn-danger" href="mirror/dist/index.html">Go somewhere</a>
				</div>
			  </div> 
		    </div>
		  </div>
		  
		  <div class="col-lg-4 col-sm-6">
		    <div class="preview">
		     <div class="image">
		        <a href="caesar/dist/index.html"><img src="img/cover.jpeg" class="img-responsive" alt="Cerulean" title="" style=""></a>
		  			  </div>
		      <div class="options">
		        <h3>Caesar cipher</h3>
		        <p>古典密码</p>
		        <div class="btn-group">
					<a class="btn btn-danger" href="caesar/dist/index.html">Go somewhere</a>
				</div>
			  </div> 
		    </div>
		  </div>
			  
		  <div class="col-lg-4 col-sm-6">
		    <div class="preview">
		     <div class="image">
		        <a href="vigenere/dist/index.html"><img src="img/cover.jpeg" class="img-responsive" alt="Cerulean" title="" style=""></a>
		  		</div>
		      <div class="options">
		        <h3>Vigenere</h3>
		        <p>古典密码</p>
		        <div class="btn-group">
					<a class="btn btn-danger" href="vigenere/dist/index.html">Go somewhere</a>
				</div>
			  </div> 
		    </div>
		  </div>	
				
		  <div class="col-lg-4 col-sm-6">
		    <div class="preview">
		     <div class="image">
		        <a href="morse/index.html"><img src="img/cover.jpeg" class="img-responsive" alt="Cerulean" title="" style=""></a>
		  		</div>
		      <div class="options">
		        <h3>Morse code</h3>
		        <p>古典密码</p>
		        <div class="btn-group">
					<a class="btn btn-danger" href="morse/index.html">Go somewhere</a>
				</div>
			  </div> 
		    </div>
		  </div>			
				  
				  
		  
		  <div class="col-lg-4 col-sm-6">
		    <div class="preview">
		     <div class="image">
		        <a href="ascii/dist/index.html"><img src="img/cover.jpeg" class="img-responsive" alt="Cerulean" title="" style=""></a>
		  		</div>
		      <div class="options">
		        <h3>ASCII</h3>
		        <p>编码</p>
		        <div class="btn-group">
					<a class="btn btn-danger" href="ascii/dist/index.html">Go somewhere</a>
				</div>
			  </div> 
		    </div>
		  </div>			  
		  
		  <div class="col-lg-4 col-sm-6">
		    <div class="preview">
		     <div class="image">
		        <a href="https://baike.baidu.com/item/DES"><img src="img/cover.jpeg" class="img-responsive" alt="Cerulean" title="" style=""></a>
		  		</div>
		      <div class="options">
		        <h3>DES</h3>
		        <p>现代密码</p>
		        <div class="btn-group">
					<a class="btn btn-danger" href="">Go somewhere</a>
				</div>
			  </div> 
		    </div>
		  </div>			  
		  
		  <div class="col-lg-4 col-sm-6">
		    <div class="preview">
		     <div class="image">
		        <a href="rsa/index.html"><img src="img/cover.jpeg" class="img-responsive" alt="Cerulean" title="" style=""></a>
		  		</div>
		      <div class="options">
		        <h3>RSA</h3>
		        <p>现代密码</p>
		        <div class="btn-group">
					<a class="btn btn-danger" href="rsa/index.html">Go somewhere</a>
				</div>
				<div class="btn-group">
					<a class="btn btn-danger" href="rsa/RSA.html">Go somewhere</a>
				</div>
			  </div> 
		    </div>
		  </div>			  
		  
		  
		  <div class="col-lg-4 col-sm-6">
		    <div class="preview">
		     <div class="image">
		        <a href=""><img src="img/cover.jpeg" class="img-responsive" alt="Cerulean" title="" style=""></a>
		  		</div>
		      <div class="options">
		        <h3>ECC</h3>
		        <p>现代密码</p>
		        <div class="btn-group">
					<a class="btn btn-danger" href="">Go somewhere</a>
				</div>
			  </div> 
		    </div>
		  </div>	
					
		  <div class="col-lg-4 col-sm-6">
		    <div class="preview">
		     <div class="image">
		        <a href=""><img src="img/cover.jpeg" class="img-responsive" alt="Cerulean" title="" style=""></a>
		  		</div>
		      <div class="options">
		        <h3>SHA1</h3>
		        <p>现代密码</p>
		        <div class="btn-group">
					<a class="btn btn-danger" href="">Go somewhere</a>
				</div>
			  </div> 
		    </div>
		  </div>
					
		  <div class="col-lg-4 col-sm-6">
		    <div class="preview">
		     <div class="image">
		        <a href=""><img src="img/cover.jpeg" class="img-responsive" alt="Cerulean" title="" style=""></a>
		  		</div>
		      <div class="options">
		        <h3>3DES</h3>
		        <p>现代密码</p>
		        <div class="btn-group">
					<a class="btn btn-danger" href="">Go somewhere</a>
				</div>
			  </div> 
		    </div>
		  </div>									  
					
		  <div class="col-lg-4 col-sm-6">
		    <div class="preview">
		     <div class="image">
		        <a href="aes/dist/index.html"><img src="img/cover.jpeg" class="img-responsive" alt="Cerulean" title="" style=""></a>
		  		</div>
		      <div class="options">
		        <h3>AES</h3>
		        <p>现代密码</p>
		        <div class="btn-group">
					<a class="btn btn-danger" href="aes/dist/index.html">Go somewhere</a>
				</div>
		        <div class="btn-group">
					<a class="btn btn-danger" href="aes/dist2/aes1.html">Go somewhere</a>
				</div>				
			  </div> 
		    </div>
		  </div>						
			
			
			
				
		  

        </div>
      </div>

      </div>
    </div>

    <div class="container">
      <footer id="footer">
        <div class="row">
          <div class="col-lg-12">
            <ul class="list-unstyled">
              <h4 class="float-lg-right"><a href="#top">Back to top</a></h4>
            </ul>
			<h4 align="center">Copyright&nbsp;&copy;<span id="year">2020</span>
			<a href="https://jwt1399.top" target="_blank">简简</a>&nbsp;|&nbsp;Powered by&nbsp;
			<a href="https://docs.djangoproject.com/zh-hans/3.0/intro/" target="_blank">Django</a>&nbsp;|&nbsp;Theme&nbsp;
			<a href="https://www.bootcss.com/" target="_blank">Bootstrap</a>&nbsp;</h4>
			<br>
			<h4 align="center">
				<a href="http://www.beian.miit.gov.cn/" target="_blank">蜀ICP备19020450号</a>
			</h4>	         		  
          </div>
        </div>
      </footer>
    </div>


    <script src="js/jquery.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/custom.js"></script>
    <script>
      !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
    </script>
  

<iframe scrolling="no" frameborder="0" allowtransparency="true" src="./plugin/widget_iframe.c63890edc4243ee77048d507b181eeec.html" title="Twitter settings iframe" style="display: none;"></iframe><iframe id="rufous-sandbox" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="true" style="position: absolute; visibility: hidden; display: none; width: 0px; height: 0px; padding: 0px; border: none;" title="Twitter analytics iframe" src="./plugin/saved_resource.html"></iframe></body></html>